<template>
  	<div class="login_page fillcontain">
	  	<transition name="form-fade" mode="in-out">
            <div class="container">
            <div class="header">
                <div  class="text">
                    白云区政务大数据平台
                </div>
                <div class="right">
                    <img src="../../static/img/1_03.jpg" />
                </div>
            </div>
            <div class="con">
                <div class="top">
                    <div class="one">
                        <img src="../../static/img/honguan.jpg" v-on:click="goto(honguan)"/>
                    </div>
                    <div class="two">
                        <img src="../../static/img/zonghe.jpg" v-on:click="goto(zonghe)"/>
                    </div>
                    <div class="two">
                        <img src="../../static/img/zhengwu.jpg" v-on:click="goto(zhengwu)"/>
                    </div>
                </div>
                <div class="bottom">
                    <div class="three">
                        <img src="../../static/img/yiqi.jpg" v-on:click="goto('yiqi')"/>
                    </div>
                    <div class="three">
                        <img src="../../static/img/yireng.jpg" v-on:click="goto('yr_index')"/>
                    </div>
                    <div class="three">
                        <img src="../../static/img/zizhu.jpg" v-on:click="goto(zizhu)"/>
                    </div>
                    <div class="three" id="tttt">
                       <img src="../../static/img/xitong.jpg" v-on:click="goto(xitong)"/>
                    </div>
                </div>
            </div>
            </div>
	  	</transition>
  	</div>
</template>

<script>
//	import {login, getAdminInfo} from '@/api/getData'
	import {mapActions, mapState} from 'vuex'

	export default {
	    data(){
			return {}
		},
		mounted(){
//            alert(111)
		},
		computed: {

		},
		methods: {
            goto:function (goto) {
                // console.log(goto)
                if(goto == "yiqi"){
                    this.$router.push("/manage");//如果goto==“yiqi”  此处添加路由跳转到/manage
                }
                if(goto == "yr_index"){
                    this.$router.push("/yr_index");
                }

            }
		},
		watch: {

		}
	}
</script>

<style  scoped>
    .container{background-color: #336fdd;width: 100%;height: 100% }
    .header{overflow: hidden; margin-bottom: 30px;}
    .text{color: white; font-size:35px; font-weight: bold;  margin-top: 20px; margin-left: 35px; float: left}
    .right{float: right; margin-top: 20px;}
    .con{
          width:750px;
          margin: 50px auto;
          position: absolute;
          top:50%;
          left:50%;
          transform:translate(-50%,-80%)
       }
        .con .top {overflow: hidden; width: 750px; text-align: center;}
        .con .top .one {width: 50%; float: left; }
        .con .top .two img{width: 170px; height: 174px;}
        .con .bottom .three img{width: 170px; height: 174px;}
        .con .top .two{width: 25%; float: left; padding-left: -30px; }
        .con .bottom{overflow: hidden; width: 750px; text-align: center;  margin-top: 20px;height: initial;position: initial}
        .con .bottom .three{width: 25%; float: left; padding-left: -30px; }
</style>
